<template>
  <div class="table-container">
    <div class="search-box">
      <div class="search-box-left" :style="{height: searchHeight+'px'}">
        <el-row>
          <el-col :span="6" v-for="search in searchConfigs" :key="search.key"  >
            <div class="search-item" v-if="search.type==='input'">
              <div class="search-item-title">{{search.name+':'}}</div>
              <el-input v-model="search.value" class="search-item-name" :placeholder="`请输入${search.name}...`" clearable></el-input>
            </div>
            <div class="search-item" v-else-if="search.type === 'select'">
              <div class="search-item-title">{{search.name+':'}}</div>
              <el-select v-model="search.value" class="search-item-name" :placeholder="`请选择${search.name}...`" clearable>
                <el-option v-for="opt in search.options" :key="opt.value" :label="opt.label" :value="opt.value" ></el-option>
              </el-select>
            </div>
            <div class="search-item" v-else-if="search.type === 'time'">
              <div class="search-item-title">{{search.name+':'}}</div>
              <el-date-picker  v-model="search.value" class="search-item-name" format="YYYY-MM-DD " value-format="YYYY-MM-DD 00:00:00"></el-date-picker>
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="select-box-right flex-between-center " style="padding: 0 40px">
        <div v-if="!isOpenSearch" class="pointer flex-between-center w-4em" @click="handleOpenSearch">
          展开<el-icon><ArrowDown /></el-icon>
        </div>
        <div v-else class="pointer flex-between-center w-4em " @click="handleOpenSearch">
          收回<el-icon><ArrowUp /></el-icon></div>
        <div><slot name="search-btn"></slot></div>
      </div>


    </div>
    <div class="table-box">
      <el-table :data="dataList" border stripe>
        <el-table-column type="index" label="序号" width="55px" align="center"></el-table-column>
        <template  v-for="col in tableColumns" :key="col.key">
          <el-table-column
              v-if="!col.hasEnum"
              :prop="col.key"
              :label="col.label"
              :align="col.align?col.align:'center'"
              :width="col.width?col.width:'auto'"
              :formatter="col.formatter?col.formatter:dataFormatter"
              show-overflow-tooltip
          ></el-table-column>

          <slot v-else name="enumTable"></slot>
        </template>
        <slot name="operateTable"></slot>
      </el-table>
    </div>
    <div class="flex-center-center mt--10 mb--10" >
      <el-pagination
          :size="pageInfo.pageNum"
          :page-size="pageInfo.pageSize"
          :total="total"
          background  layout="total, prev, pager, next"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"/>
    </div>
  </div>
</template>

<script setup>
import {defineComponent, ref} from "vue";
const props = defineProps({
  // 表格数据
  dataList: Array,
  // 表格配置
  tableColumns: Array,
  // 查询配置
  searchConfigs:Array,
  // 分页器
  pageInfo: Object,
  total: Number
})
const isOpenSearch = ref(false)
const searchHeight = ref(50)
const emit = defineEmits(['getDataList'])
defineComponent({
  name: 'table'
})
// 格式化数据
const dataFormatter = (row, column, cellValue) => {

  return cellValue !== null? cellValue:'--'
}
const handleOpenSearch = () => {
  isOpenSearch.value = !isOpenSearch.value
  // 倍数
  const multiple = Math.ceil(props.searchConfigs.length / 4)
  console.log(multiple)
  if (isOpenSearch.value) {
    searchHeight.value = multiple * 50
  }else {
    searchHeight.value = 50
  }
}
// 切换页码
const handleSizeChange = (size) => {
  props.pageInfo.pageSize = size
  emit("getDataList")
}
// 切换当页数量
const handleCurrentChange = (num) => {
  props.pageInfo.pageNum = num
  emit("getDataList")
}

</script>


<style scoped lang="less">
.search-box {
  display: flex;
  flex-wrap: wrap;
  .search-box-left {
    flex-basis: 80%;
    transition: height ease-in-out 0.3s;
  }
  .select-box-right {
    flex-basis: 20%;
  }
}
.search-item {
  display: flex;
  align-items: center;
  height: 50px;
  width: 100%;
  .search-item-title {
    //width: calc(400px - 180px);
    width: calc(300px - 180px);
    text-align: center;

  }
  .search-item-name {
    width: 220px !important;

    :deep(.el-input__inner) {
      width: 180px ;
      height: 30px;
    }
    .el-date-editor.el-input, .el-date-editor.el-input__wrapper {
      width: 180px !important;
    }

  }
}
</style>